<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>激活码验证</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .container {
      width: 400px;
      height: 300px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      padding: 20px;
      text-align: center;
    }
    h1 {
      color: #007BFF;
    }
    p {
      color: #333;
    }
    input {
      width: 66%;
      padding: 8px;
      height: 28px;
      margin: 5px 0;
      font-size: 18px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    button {
      width: 100px;
      height: 40px;
      background-color: #007BFF;
      color: #fff;
      border: none;
      font-size: 16px;
      border-radius: 4px;
      margin: 10px 20px;
      cursor: pointer;
    }
    button:hover {
      background-color: #0056b3;
    }

  </style>
</head>
<body>
<div class="container">
  <h1>激活码验证</h1>
  <p>请输入激活码以激活您的帐户：</p>
  <input type="text" placeholder="输入用户名" id="username" ><br>
    <input type="text" placeholder="输入激活码" id="activationCode" ><br>
    <button type="submit" onclick="activation()">验证</button>
</div>
<!-- 引入jquery -->
<script src="js/jquery.min.js"></script>
<script>

  <!-- 激活码验证  -->
  function activation(){
    // 1, 得到组件,并判断非空
    let activationCode = jQuery("#activationCode");
    let username = jQuery("#username");
    if(username.val().trim() == ""){
      alert("请输入激活码！");
      username.focus(); // 聚集光标
      return false;
    }
    if(activationCode.val().trim() == ""){
      alert("请输入激活码！");
      activationCode.focus(); // 聚集光标
      return false;
    }
    // 2，把提交按钮设置为不可用(禁用状态）
    jQuery('#submit').attr("disabled",'disabled');
    // 3，把当前页面的数据提交给后端
    jQuery.ajax({
      url:"/user/activation",
      type:"POST",
      data:{
        "username":username.val().trim(),
        "activationCode":activationCode.val().trim()
      },
      success:function (res){
        // 4，根据后端返回的结果（成功 or 失败）再处理后续的操作
        if(res.code == 200 && res.data == 1){
          alert("账号激活成功!");
          window.close();
        }else if(res.code == -3){
          // 未在指定的激活时间内激活，重新注册
          alert("抱歉：账号激活失败！ " + res.message);
          location.href = "register.html";
          // 把提交按钮的禁用状态解除
          jQuery("#submit").removeAttr("disabled");
        } else if(res.code == -4){
          // 用户账号已激活，跳转至登录界面
          alert("抱歉：账号激活失败！ " + res.message);
          location.href = "login.html";
          // 把提交按钮的禁用状态解除
          jQuery("#submit").removeAttr("disabled");
        } else{
          alert("抱歉：账号激活失败！ " + res.message);
          location.href = "activationAccount.html";
          // 把提交按钮的禁用状态解除
          jQuery("#submit").removeAttr("disabled");
        }
      }
    });
  }
</script>
</body>
</html>
